<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/default.min.css"><link rel="stylesheet" href="https://unpkg.com/markmap-toolbar@0.15.4/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://unpkg.com/d3@7.8.5/dist/d3.min.js"></script><script src="https://unpkg.com/markmap-view@0.15.4/dist/browser/index.js"></script><script src="https://unpkg.com/markmap-toolbar@0.15.4/dist/index.js"></script><script>(r => {
          setTimeout(r);
        })(() => {
  const {
    markmap,
    mm
  } = window;
  const toolbar = new markmap.Toolbar();
  toolbar.attach(mm);
  const el = toolbar.render();
  el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
  document.body.append(el);
})</script><script>((getMarkmap, getOptions, root, jsonOptions) => {
          const markmap = getMarkmap();
          window.mm = markmap.Markmap.create('svg#mindmap', (getOptions || markmap.deriveOptions)(jsonOptions), root);
        })(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"计算机网络","children":[{"type":"fence","depth":1,"content":"<pre><code class=\"language-mindmap\">root(计算机网络)\n    (体系机构)\n    (物理层)\n    (数据链路层)\n    (网络层)\n    (传输层)\n    (应用层)\n</code></pre>\n","children":[],"payload":{"lines":[3,12]}},{"type":"heading","depth":1,"payload":{"lines":[15,16]},"content":"体系结构","children":[]},{"type":"heading","depth":1,"payload":{"lines":[17,18]},"content":"物理层","children":[]},{"type":"heading","depth":1,"payload":{"lines":[19,20]},"content":"数据链路层","children":[]},{"type":"heading","depth":1,"payload":{"lines":[21,22]},"content":"网络层","children":[]},{"type":"heading","depth":1,"payload":{"lines":[23,24]},"content":"传输层","children":[]},{"type":"heading","depth":1,"payload":{"lines":[25,26]},"content":"应用层","children":[]},{"type":"heading","depth":1,"payload":{"lines":[27,28]},"content":"一些总结","children":[]}]},null)</script>
</body>
</html>
